<template>
	<div class="system-edit-user-container">
		<el-dialog title="添加商品" v-model="isShowDialog" width="769px">
			<el-form :model="ruleForm" size="small" label-width="90px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="商品编号">
							<!-- <el-input v-model="ruleForm.productId" disabled  clearable></el-input> -->
							<el-input v-model="ruleForm.productId" disabled  clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="商品名称">
							<el-input v-model="ruleForm.productName" placeholder="请输入商品名称" clearable></el-input>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="商品价格">
							<el-input v-model="ruleForm.productPrice" placeholder="请输入商品价格" clearable></el-input>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="商品库存">
							<!-- <el-input v-model="ruleForm.productStock" placeholder="请输入商品名称" clearable></el-input> -->
							<el-input-number v-model="ruleForm.productStock" :min="-1" :max="99999999" />
							 -1表示无限
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="商品类目">
							<el-select v-model="ruleForm.categoryId" placeholder="请输入商品类目">
								<el-option v-for="item in optionsCategory" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"> </el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="商品状态">
							<el-select v-model="ruleForm.productStatus" placeholder="请选择" clearable class="w100">
								<el-option v-for="item in optionsStatus" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled"> </el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="商品描述">
							<el-input v-model="ruleForm.productDescription" type="textarea" placeholder="一句话介绍你的商品(不能有空格)" maxlength="150"></el-input>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="商品图片">
							<el-upload 
							:on-success="uploadSucess" :show-file-list="false" class="h100 personal-user-left-upload" action="http://lzyzone.top:8009/orderback/image/upload/seller" multiple="false">
								<img style="width:200px;height:200px" :src="ruleForm.productIcon"/>
								<el-button style="margin-left: 10px" size="small" type="primary">点击上传</el-button>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="small">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="small">添 加</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import {updateProductInfo} from '/@/api/product/product.ts';
import { reactive, toRefs, onMounted, getCurrentInstance} from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { Session } from '/@/utils/storage';
import {findlike, categoryUpdate, categoryList,deleteCategory} from '/@/api/product/category.ts';
export default {
	name: 'systemAddUser',
	setup() {

		const { proxy } = getCurrentInstance() as any;
		const state = reactive({
			// categoryTableData: [], // 显示的商品类目
			optionsCategory: [],
			isShowDialog: false,
			ruleForm: {
				productId: '', // 商品编号
				productName: '', // 商品名称
				productPrice: '', // 商品价格
				productStock: '', // 商品库存
				categoryId: '', // 类目编号
				productStatus: '', // 商品状态
				productIcon: '', // 商品图片路径

			},
			
			deptData: [], // 部门数据
		});
		// 打开弹窗
		const openDialog = () => {
			// this.initTableData();
			state.ruleForm = {
				productId: '', // 商品编号
				productName: '', // 商品名称
				productPrice: '', // 商品价格
				productStock: '-1', // 商品库存
				categoryId: '', // 类目编号
				productStatus: '', // 商品状态
				productIcon: 'http://localhost:8009/images/common/edce4837-b2b4-4b56-8f8d-5ec3e0e84399.png', // 商品图片路径

			},
			console.log("打开了新增弹窗");
			initCategory();
			state.isShowDialog = true;
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// // 新增
		// const onSubmit = () => {
		// 	ElMessage.success("添加");
		// 	closeDialog();
		// };

		const  optionsStatus = [
			{
				value: 0,
				label: '上架'
			}, 
			{
				value: 1,
				label: '下架'
			}
		];

		// const optionsCategory  :any = [];

		// 初始化部门数据
		const initTableData = () => {
			// state.deptData.push({
			// 	deptName: 'vueNextAdmin',
			// 	createTime: new Date().toLocaleString(),
			// 	status: true,
			// 	sort: Number.parseInt(Math.random()),
			// 	describe: '顶级部门',
			// 	id: Math.random(),
			// 	children: [
			// 		{
			// 			deptName: 'IT外包服务',
			// 			createTime: new Date().toLocaleString(),
			// 			status: true,
			// 			sort: Number.parseInt(Math.random()),
			// 			describe: '总部',
			// 			id: Math.random(),
			// 		},
			// 		{
			// 			deptName: '资本控股',
			// 			createTime: new Date().toLocaleString(),
			// 			status: true,
			// 			sort: Number.parseInt(Math.random()),
			// 			describe: '分部',
			// 			id: Math.random(),
			// 		},
			// 	],
			// });
		};
		// 页面加载时
		onMounted(() => {
			// this.initCategory();
		});

		// 查询所有商品类目
		const initCategory = ()=> {
			// 获取本地的token
			let userInfo = Session.get('userInfo');
			categoryList(userInfo.id).then((res:any)=>{
				console.log("初始化类目编号");
				// state.categoryTableData = res.data.categoryList;
				// console.log(state.categoryTableData);
				// console.log(res);
				// optionsCategory :any=[];
				// optionsCategory :any = [];
				let categoryList = [];
				// categoryList = res.data.categoryList;
				res.data.categoryList.forEach((item:any, index:any)=>{
					let categoryOptin = {
						value: item.categoryId,
						label: item.categoryName
					}
					categoryList.push(categoryOptin);
				})
				console.log("----------------")
				console.log(categoryList);
				state.optionsCategory = categoryList;
				console.log(state.optionsCategory);
				console.log("----------------")
				// return res.categoryList;	
			}).catch((err:any)=>{

			})
			return null;
		}

		// 图片上传成功的回调函数
		const uploadSucess = (response: any) => {
			console.log(1111111111);
			console.log(response);
			// http://localhost:8009/images/iu.jpg
			// state.userUrl = response.data.filePath;
			// console.log(response.data.filePath);
			// const sellerInfo = {
			// 	nickname: response.data.filePath
			// }
			//  更改图片
			state.ruleForm.productIcon = response.data.filePath;
			console.log("图片更改的地址" + state.ruleForm.productIcon);
			
		};

			// 修改
		const onSubmit = () => {
			// 修改商品信息
			updateProductInfo({...state.ruleForm})
				.then((res:any) =>{
					// 重新刷新
					proxy.mittBus.emit('initTableData');
					ElMessage.success("添加成功!");
					closeDialog();
				})
				.catch((err:any) =>{

				})
		};

		return {
			uploadSucess,
			// optionsCategory,
			initCategory,
			optionsStatus,
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			...toRefs(state),
		};
	},
};
</script>
